*,
*:before,
*:after {
	box-sizing: inherit;
}
@borderColor: rgb(204,204,204);
@grid-col-width: 50px; //列宽
@grid-row-height: 30px; //行高
@tableTrHoverBGColor: #D9EBF9; //表格行鼠标移入时的效果
@gridBG:rgb(253, 253, 253);
@header-height:1.3rem;

.oc-grid,
.oc-list {
	overflow: hidden;
	position: absolute;
	background: #f0f0f0;
	box-sizing: border-box;
	cursor: default;
}

.oc-grid-bisect,
.oc-grid-col-header,
.oc-grid-inner,
.oc-list-inner {
	position: absolute;
}
/*左上角部分遮挡*/
.oc-grid-bisect {
	height: @grid-row-height;
	line-height: @grid-row-height;
	width: @grid-col-width;
	color: #333;
	background-color: @gridBG;
	z-index: 2;
	text-align: center;
	border-bottom: 1px solid @borderColor;
	border-right: 1px solid @borderColor;
}
/* 列头 */
.oc-grid-col-header {
	z-index: 1;
	left: 0;
	text-align: right;
	color: #666;
	border-right: 1px solid @borderColor;
	width: @grid-col-width;
	height: 9999px;
	margin-top: @grid-row-height;
	div {
		line-height: @grid-row-height;
		background-color: @gridBG;
		border-bottom: 1px solid @borderColor;
		&.selected {
			border-right: 3px solid red;
		}
	}
}
/* 行头 */
.oc-grid-row-header {
	z-index: 1;
	position: relative;
	top: 0;
	width: 999999px;
	border-bottom: 1px solid @borderColor;
	height: @grid-row-height;
	line-height: @grid-row-height;
	margin-left: @grid-col-width;
	div.selected {
		border-bottom: 3px solid red;
	}
}

.oc-grid-inner {
	textarea {
		position: absolute;
		z-index: 20;
		background: #f0f0f0;
		border: none;
	}
	table {
		border-collapse: separate;
		border-spacing: 0;
		position: absolute;
		padding: 0 100px 100px 0;//表格的边距
		line-height: @grid-row-height;
		thead tr {
			height: 0;
			th {
				width: 0;
				padding: 0;
			}
		}
		td {
			height: 0;
			border: solid @borderColor;
			border-width: 0 1px 1px 0;//内部的表格线是每个单元格的右、下边组成的。
			position: relative;
			background: #fff;
			&.selected {
				box-shadow: inset 0px 0px 0px 2px @borderColor;
				z-index: 10;
			}
		}
	}
}
.oc-grid-row-header div,
.oc-list-header label {
	background-color: @gridBG;
	border-right: 1px solid @borderColor;
	float: left;
	text-align: center;
	color: #666;
	height: 100%;
	position: relative;
	hr {
		display: block;
		position: absolute;
		height: 100%;
		right: -1px;
		top: 0;
		width: 0;
		border: none;
		border-left: 1px solid @borderColor;
		cursor: e-resize;
		&:after {
			content: "";
			display: block;
			width: 10px;
			height: 100%;
			margin-left: -5px;
			position: absolute;
			z-index: 1;
		}
	}
}
.oc-grid-row-header div,
.oc-list-header label,
.oc-grid-inner div,
.oc-list-inner div{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap; //禁止换行，超出隐藏显示省略
}
.oc-grid-inner,
.oc-list-inner {
	overflow: auto;
	top: @grid-row-height;
	left: @grid-col-width;
	right: 0;
	bottom: 0;
	td div {
		//撑满单元格
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		padding-left: 0.2rem;
	}
}
/*list组件*/
.oc-list {
	background: #fff;
	border: 1px solid #ccc;
    -moz-user-select: none; 
    -webkit-user-select: none; 
    -ms-user-select: none;
	header {
		width: 200%;
		position: absolute;
		background-color: @tableHeadColor;
		label{
			line-height: @header-height;
		}
		label:hover {
			background-color: @tableTrHoverBGColor;
		}
	}
	td div,label {
		height: @header-height;
		display: block;
		padding: 0 0.5em;
		text-align: left;
	}
}
.oc-list-inner {
	left: 0;//覆盖拉伸模式的left
	tbody tr {
		height: @formH;
		&:hover {
			background-color: @tableTrHoverBGColor;
		}
		&.active {
			box-shadow: 0 0 0 1px rgba(102, 102, 102, 0.2) inset;
			background-color: #CCE8FE;
		}
	}
	td {
		position: relative;
	}
	div {
		line-height: 1.1rem;
	}

}
